<template>
    <view class="fh-width-100">
        <view v-if="cardinfo">
            <image class="fh-width-100" mode="widthFix" :src="imageUrl" @tap="$utils.pic.pvi(imageUrl)"></image>
        </view>
        <view class="uni-center" v-else>
            还没有卡片点击下方的按钮生成吧
        </view>
        <view class="uni-list fh-width-100" v-if="advance">
            <view class="uni-list-cell-divider background-color-after-none background-color-before-none">
                选择1张作为主图
            </view>
            <view class="fh-padding-30">
                <view class="uni-flex fh-flex-wrap">
                    <view v-for="(item,index) in picData" @tap="mainSelect(item,index)" :key="index"
                          class="image-item-view">
                        <image class="fh-width-100 fh-height-100"
                               :src="item.picUrl"
                               mode="aspectFill"></image>
                        <view v-if="item.mainSelect"
                              style="background-color: #fff;width:24px;height: 24px;border-radius:50%;position:absolute;left:3px;top:3px;">
                            <text class="uni-icon uni-icon-checkmarkempty"></text>
                        </view>

                    </view>
                </view>
            </view>
            <view class="uni-list-cell-divider background-color-after-none background-color-before-none">
                选择3张作为副图
            </view>
            <view class="fh-padding-30">
                <view class="uni-flex fh-flex-wrap">
                    <view v-for="(item,index) in picData" @tap="normalSelect(item,index)" :key="index"
                          class="image-item-view">
                        <image class="fh-width-100 fh-height-100"
                               :src="item.picUrl"
                               mode="aspectFill"></image>
                        <view v-if="item.normalSelect"
                              style="background-color: #fff;width:24px;height: 24px;border-radius:50%;position:absolute;left:3px;top:3px;">
                            <text class="uni-icon uni-icon-checkmarkempty"></text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="uni-center">
            <text @tap="showAdvance" style="margin-bottom: 10px;color: #1e9eff">高级选项</text>
        </view>
        <view class="fh-padding-30">
            <button type="primary" :loading="generateLoading" @tap="generate">{{cardinfo ? '重新': ''}}生成卡片</button>
        </view>
    </view>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        data() {
            return {
                picData: [],
                advance: false,
                generateLoading: false,
                cardinfo: null
            };
        },
        onLoad() {
            this.loadData()
        },
        computed: {
            ...mapState([
                'userInfo',
            ]),
            imageUrl() {
                return this.cardinfo.picUrl
            }
        },
        methods: {
            loadData() {
                this.$http.get('/user-card/userId/' + this.userInfo.id).then(res => {
                    this.cardinfo = res.data
                })
            },
            showAdvance() {
                this.advance = !this.advance
                if (this.advance) {
                    this.loadPicData()
                }
            },
            mainSelect(item, index) {
                for (let i = 0; i < this.picData.length; i++) {
                    this.picData[i].mainSelect = false
                    this.picData.splice(i, 1, this.picData[i])
                }
                item.mainSelect = !this.picData[index].mainSelect
                this.picData.splice(index, 1, item)
            },
            normalSelect(item, index) {
                item.normalSelect = !this.picData[index].normalSelect
                this.picData.splice(index, 1, item)

                let count = 0
                for (let i = 0; i < this.picData.length; i++) {
                    if (this.picData[i].normalSelect) {
                        count++
                    }
                }
                if (count > 3) {
                    item.normalSelect = !this.picData[index].normalSelect
                    this.picData.splice(index, 1, item)
                    uni.showToast({
                        icon: 'none',
                        title: '抱歉，目前最多支持3张哦'
                    })
                }

            },
            loadPicData: function () {
                uni.showLoading({
                    title: '加载中'
                })

                //加载图片
                this.$http.get('/app/user-album/getList').then(res => {
                    let content = res.data.normal || []
                    this.picData = content
                }).catch(() => {
                    this.picData = []
                    uni.showToast({
                        icon: 'none',
                        title: '您的相册中还没有图片，快去上传吧'
                    })
                }).finally(() => {
                    uni.hideLoading()
                })
            },
            // 生成卡片
            generate() {
                let self = this
                this.generateLoading = true
                let mainSelect = null
                let normalSelect = []
                for (let i = 0; i < this.picData.length; i++) {
                    if (this.picData[i].mainSelect) {
                      // 这里只取一个
                        mainSelect = this.picData[i].id
                    }
                    if (this.picData[i].normalSelect) {
                        normalSelect.push(this.picData[i].id)
                    }
                }
                let p = {
                    appCode: self.$config.mpAppCode,
                    mainPicSelectedId: mainSelect,
                    normalPicSelectedIds: normalSelect
                }

                this.$http.post('/app/user-gen-card', p).then(res => {
                    let content = res.data
                    self.cardinfo = content
                    self.generateLoading = false
                    this.advance = false

                    uni.showToast({
                        icon: 'none',
                        title: '卡片生成成功'
                    })
                }).catch(() => {
                    self.generateLoading = false

                    uni.showToast({
                        icon: 'none',
                        title: '卡片生成失败，请确认信息是否完整!'
                    })
                })
            }
        }
    }
</script>

<style>
    .image-item-view {
        margin: 10px;
        display: inline-block;
        position: relative;
        width: 150px !important;
        height: 150px !important;
        background-color: #eee;
        cursor: pointer;
        color: #ddd;
    }
</style>
